import {useCallback, useEffect, useState} from 'react'
import cls from "classnames"
import './index.scss'
import Task from "./task";
import GiftBox from "./giftBox";
import Modal from "../../components/modal";
import OpenBox from "./openBox";

function SignUp() {
  const [resultVisible, setResultVisible] = useState(false)
  const [tipIsChecked, setTipIsChecked] = useState(true)
  useEffect(() => {

  }, [])

  const close = () => {
    console.log('close')
  }

  const toggleChecked = e => {
    setTipIsChecked(e.target.checked)
    if(e.target.checked) {
      alert('首页提醒已开启')
    } else {
      alert('首页提醒已关闭')
    }
  }

  const showTip = () => {
    alert('累计签到30天可以获得额外奖励')
  }

  return (
    <div className="SignUp">
      <Task>
        <GiftBox onClick={setResultVisible.bind(this, true)}>
          <h4 className="title">
            签到
            <button className="toggle-btn">
              <span className="text">提醒</span>
              <input type="checkbox" id="toggle"
                     onChange={toggleChecked}
                     key={tipIsChecked}
                     checked={tipIsChecked}
                     className="checkbox"/>
              <label htmlFor="toggle" className="toggle"/>
            </button>
          </h4>

          <button className="sign-msg" onClick={showTip}>已累计签到 <span className="day">2</span> &gt;</button>
        </GiftBox>
      </Task>

      <Modal className="result-modal" visible={resultVisible} closable={false}>
        <OpenBox resultVisible={resultVisible} onClose={setResultVisible.bind(this, false)}/>
      </Modal>
    </div>
  )
}

export default SignUp
